/* eslint-disable no-debugger */
/* eslint-disable react/no-array-index-key */
/**
 * 表单面板布局，生成表单外面容器
 * @author LiAnqi
 * @date 2022-3-22
 * @description
 * [props]
 * panelType 表单面板类型： card, collapse, whiteboard;
 * children 内容集；
 */
import { Collapse, Card, Tabs, Row, Col } from 'antd'
import { PANEL_TYPE } from './Constant'

const { Panel } = Collapse
const { TabPane } = Tabs

function PanelSkeleton(props) {
  const { title, panelType, children, ...restProps } = props

  const cardSkeleton = () => (
    // console.log('cardSkeleton')
    <Card title={title}>{children}</Card>
  )

  const collapseSkeleton = () => (
    // console.log('cardSkeleton')
    <Collapse defaultActiveKey={['1']}>
      <Panel header={title} key="1">
        {children}
      </Panel>
    </Collapse>
  )

  const tabsSkeleton = () => (
    // console.log('cardSkeleton')
    <Tabs defaultActiveKey="1">
      {children?.map((item, index) => (
        <TabPane tab={item.title} key={index}>
          {item}
        </TabPane>
      ))}
    </Tabs>
  )

  const whiteBoardSkeleton = () => (
    <Row>
      <Col span="24">{children}</Col>
    </Row>
  )

  const renderSkeleton = () => {
    let skeleton = null
    switch (panelType) {
      case PANEL_TYPE.CARD:
        skeleton = cardSkeleton()
        break
      case PANEL_TYPE.COLLAPSE:
        skeleton = collapseSkeleton()
        break
      case PANEL_TYPE.TABS:
        skeleton = tabsSkeleton()
        break
      case PANEL_TYPE.WHITEBOARD:
        skeleton = whiteBoardSkeleton()
        break
      default:
        break
    }
    return skeleton
  }
  return <>{renderSkeleton()}</>
}

export default PanelSkeleton
